<template>
    <div class="captcha_box">
        <div>
            <van-nav-bar title="" left-text="" right-text="" left-arrow @click-left="back" />
        </div>

        <van-cell class="text" :border="false" center title="更换邮箱"  :label="phoneText"/>

        <div class="inputBox">
    
            <div >
                <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                    <template #button>
                        <van-button round plain color="#ff6357" size="small" type="primary" @click.prevent="sendSmsCode" :disabled="isSmsSend">{{ sendBtnText }}</van-button>
                    </template>
                </van-field>
            </div>
        </div>

        <div class="btn">
            <van-button round @click="sub" color="#ff7b57"  size="large">下一步</van-button>
        </div>
        <div class="tishi" v-show="tishishow">
            已向手机 {{phoneNum}} 发送验证码
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
    name: "ChangeMailbox1",
    data(){
        return{
            sms:"",
            phoneText:'',   
            phoneNum:'',//从后端获取电话号码 
            tishishow:false,
           // 是否已经发送了验证码
          isSmsSend: false,
          sendBtnText: '点击发送验证码',
          timer: null,
          counter: 60
        }
    },
    created(){
        this.phoneNum=this.$store.state.userNumber   //从vuex里获取号码
        // let tel='456'   //从后端获取电话号码
        // this.phoneNum=tel
        this.phoneText="请输入" + this.phoneNum + "收到的短信验证码，以完成身份验证~"
    },
    methods:{
        back() {
            this.$router.go(-1)
        },
        sub(){
            if(this.sms){
                console.log(this.sms); 

                //后端传来的验证码 = 前端输入的sms 才能跳转 
                this.$router.push({ path:'/changeMail2'})

            }else{
                Toast('请输入验证码')
            }
        },
                        /**
         * 重置倒计时
         */
         reset () {
            this.tishishow=false

          this.isSmsSend = false
          this.sendBtnText = '点击发送验证码'
          if (this.timer) {
            clearInterval(this.timer)
            this.counter = 60
            this.timer = null
          }
        },
        /**
         * 倒计时
         */
        countDown () {
          this.timer = setInterval(() => {
            this.sendBtnText = `重新获取${this.counter}秒`
            this.counter--
            if (this.counter < 0) {
              this.reset()
            }
          }, 1000)
        },
        /**
         * 发送验证码
         */
        sendSmsCode () {
         
          // 调用接口，发送短信验证码
          this.isSmsSend = true
          
        //   提示展示出来
        this.tishishow=true
          // 开始倒计时，60s之后才能再次点击
          this.countDown()
        },

        
    }
}
</script>

<style scoped>
    .text{
        font-size: 24px;
    }
    .btn{
    width: 92%;
    margin: 50px auto ;
    }
    .inputBox{
        margin-top: 50px;
    }
    .tishi{
        width: 92%;
        margin: auto;
        text-align: center;
        font-size: 14px;
        color:#5e5e5e;
        
    }

</style>
